<template>
  <div class="picker">
    <van-popup v-model="show" position="bottom">
      <van-picker
        class="picker"
        show-toolbar
        :title="title"
        :columns="columns"
        @cancel="show = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
  export default {
    name: 'picker',

    props: {
      value: {
        type: Boolean,
        required: true
      },
      title: {
        type: String,
        default: '请选择'
      },
      columns: {
        type: Array,
        required: true
      }
    },

    components: {},

    data () {
      return {
        show: this.value
      }
    },

    watch: {
      value (newVal) {
        this.show = newVal;
      },
      show (newValue) {
        this.$emit('input', newValue)
      }
    },

    mounted () {
    },

    methods: {
      onConfirm (value) {
        this.$emit('onConfirm', value)
        this.show = false
      }
    }
  }
</script>

<style lang="scss">
  .picker {
    .van-picker__toolbar {
      display: flex;
      justify-content: space-between;
      line-height: 24px;
      background: $theme-page-bg;
      height: 54px;

      .van-picker__cancel {
        font-size: 16px;
        color: $theme-black;
      }

      .van-picker__title {
        font-weight: bold;
        font-size: 16px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }

      .van-picker__confirm {
        font-size: 16px;
        color: $theme-blue;
      }
    }
  }
</style>
